<template>
  <base-data @reload="reloadData">
    <template v-slot:header-left>
      <slot name="header-left"></slot>
    </template>
    <template v-slot:header-center>
      <slot name="header-center"></slot>
    </template>
    <template v-slot:header-righr>
      <slot name="header-righr"></slot>
    </template>
    <div class="data-arr-header">
      <el-select class="header-item" size="small" v-model="indexSort" placeholder="索引排序" @change="reloadData">
        <el-option key="1" label="索引正序" value="1"></el-option>
        <el-option key="-1" label="索引反序" value="-1"></el-option>
      </el-select>
      <el-date-picker
        class="header-item"
        size="small"
        v-model="dateValues"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button size="small" type="primary" @click="reloadData">查询</el-button>
    </div>
    <el-table
      :data="dataArr"
      border
      style="width: 100%">
      <el-table-column
        prop="createUser.name"
        label="创建人"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createTimeStr"
        label="创建时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="index"
        label="索引"
        width="80">
      </el-table-column>
      <el-table-column
        label="数据">
        <template slot-scope="scope">
          {{ scope.row.data.length > 200 ? `${scope.row.data.substr(0, 200)} ...` : scope.row.data }}
          <el-button type="text" size="small" @click="copyBtnClick(scope.row.data)">复制</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="130">
        <template slot-scope="scope">
          <el-button v-if="isSuperAdmin" type="text" size="small" @click="removeBtnClick(scope.row)">删除</el-button>
          <el-button type="text" size="small" @click="recordBtnClick(scope.row)">记录</el-button>
          <slot name="option" v-bind:model="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <pagination ref="Pagination" :total="total" @pageChange="getListData"></pagination>
    <slot />
  </base-data>
</template>

<script lang="ts">
  import {Vue, Component, Prop} from 'vue-property-decorator'
  import { Getter } from 'vuex-class'
  import BaseData from '@/components/data/base/index.vue'
  import Pagination from '@/components/global/pagination/index.vue'
  import DataModel from "@/models/DataModel";
  import {Pagination as PaginationType} from "@/components/global/pagination/types";
  import {PageDataType, ModelStatus} from "@/models/types";
  import YBPopView from "@/utils/popView";

  @Component({
    components: {
      BaseData,
      Pagination
    }
  })
  export default class DataArray extends Vue {

    @Prop({ type: Number, default: ModelStatus.NORMAL }) status!: number
    @Getter('isSuperAdmin') isSuperAdmin!: boolean

    total = 0
    indexSort = '1'
    dateValues: Array<Date> = []
    dataArr: Array<DataModel> = []

    reloadData() {
      (this.$refs.Pagination as PaginationType).reload()
    }

    // 删除
    removeBtnClick(model: DataModel) {
      this.$emit('remove-item', model)
    }

    // 记录点击
    recordBtnClick(model: DataModel) {
      const { _id } = model
      const path = `/project/record/${_id}`
      this.$router.push(path)
    }

    getListData(pageData: PageDataType) {
      const { id } = this.$route.params
      const [ startTime, endTime ] = this.dateValues
      DataModel.getDataArrayList<DataModel>(id, pageData, {
        startTime: startTime ? startTime.getTime() : undefined,
        endTime: endTime ? endTime.getTime() : undefined,
        indexSort: this.indexSort,
        status: this.status
      }).then((data) => {
        this.dataArr = data.list
        this.total = data.total
      })
    }

    copyBtnClick(data: string){
      this.$copyText(data).then(function (){
        YBPopView.msgSuccess('复制成功')
      })
    }
  }

</script>

<style scoped lang="scss">
  .data-arr-header {
    padding-bottom: 20px;
    display: flex;
    justify-content: flex-end;
    .header-item {
      margin-right: 20px;
    }
  }
</style>
